<template>
  <h1 v-if="isShow">{{newsContent}}</h1>
  <button @click="changeEdit">修改</button>
</template>

<script>
// 声明式

export default {
  name: 'App',

  data() {
    return {
      newsContent: '振兴中华',
      isShow:true
    }
  },
  methods:{
    changeEdit(){
      this.newsContent = '1111'
      this.isShow = !this.isShow
    }
  },
  beforeCreate() {
    // 可以在这里发送 请求数据
    console.log('beforeCreate 初始化之前')
  },
  created() {
    // 可以在这里发送 请求数据
    console.log('created 初始化之后')
  },
  beforeMount() {
    console.log('beforeMount 挂载之前')
  },
  mounted() {
    // 可以操作一些页面上的内容
    // 修改动态的对象
    console.log('beforeMount 挂载之后')
  },
  beforeUpdate() {
    console.log('beforeUpdate 更新之前')
  },
  updated() {
    console.log('updated 更新之后')
  },
  beforeDestroy() {
    console.log('beforeDestroy 销毁之前')
  },
  destroyed() {
    console.log('beforeDestroy 销毁之后')
  }

}
</script>

<style>
.active {
  /*width: 100px;*/
  /*height: 100px;*/
  background-color: yellowgreen;
}

#d2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>